@import "../my-theme/info.less";
.cwContainer{
  .card:before{
    z-index: -1;
  }
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .cwBody{
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex: 5;
    .courseList{
      padding: 10px 0;
      .cwDate{
        font-size: 14px;
        padding:15px 0 0 26px;
      }
      ul{
        display: flex;
        flex-wrap: wrap;
        li{
          width: 220px;
          height: 96px;
          position: relative;
          margin: 15px 26px;
          border-radius: 4px;
          overflow: hidden;
          display: flex;
          .courseMain{
            flex: 5;
            display: flex;
            align-items: center;
            .courseIcon{
              width: 44px;
              height: 75px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-right: 1px solid rgba(0,0,0,.1);
            }
            .courseDetail{
              flex: 5;
              padding: 0 15px 0 10px;
              h3{
                color: @brown-color;
                font-size: 14px;
                margin-bottom: 10px;
                display: flex;
                justify-content: space-between;
                em{
                  font-style: normal;
                  letter-spacing: 1px;
                }
              }
              .courseInfo{
                display: flex;
                flex-direction: column;
                .courseInfoMain{
                  display: flex;
                  flex: 1;
                  justify-content: space-between;
                  p{
                    line-height: 25px;
                    color: #a29c9e;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 7.5em;
                  }
                  .enterRoom{
                    button{
                      padding: 2px 4px;
                    }
                    button[disabled]{
                      color: #fff;
                      background-color: #dadada;
                      border-color: #dadada;
                    }
                  }
                }
                .lateTime,.rangeTime{
                  text-align: right;
                  color: #e74e66;
                  margin-top: 2px;
                }
              }
            }
            &.sx{
              background-color: #ecf3fc;
              .courseIcon{
                .icon{
                  background: url("../assets/student/sx.png") no-repeat center;
                  width: 23px;
                  height: 23px;
                }
              }
            }
            &.yw{
              background-color: #fae9ee;
              .courseIcon{
                .icon{
                  background: url("../assets/student/yw.png") no-repeat center;
                  width: 21px;
                  height: 21px;
                }
              }
            }
            &.sw{
              background-color: rgba(215,94,145,0.1);
              .courseIcon{
                .icon{
                  background: url("../assets/student/sw.png") no-repeat center;
                  width: 20px;
                  height: 22px;
                }
              }
            }
            &.dl{
              background-color: rgba(134,210,177,0.1);
              .courseIcon{
                .icon{
                  background: url("../assets/student/dl.png") no-repeat center;
                  width: 24px;
                  height: 22px;
                }
              }
            }
            &.zz{
              background-color: #e3f4f7;
              .courseIcon{
                .icon{
                  background: url("../assets/student/zz.png") no-repeat center;
                  width: 21px;
                  height: 22px;
                }
              }
            }
            &.yy{
              background-color: #f3edfc;
              .courseIcon{
                .icon{
                  background: url("../assets/student/english.png") no-repeat center;
                  width: 21px;
                  height: 21px;
                }
              }
            }
            &.wl{
              background-color: rgba(115,117,215,0.2);
              .courseIcon{
                .icon{
                  background: url("../assets/student/wl.png") no-repeat center;
                  width: 21px;
                  height: 21px;
                }
              }
            }
            &.hx{
              background-color: rgba(95,168,241,0.2);
              .courseIcon{
                .icon{
                  background: url("../assets/student/hx.png") no-repeat center;
                  width: 22px;
                  height: 22px;
                }
              }
            }
            &.ls{
              background-color: rgba(245,157,135,0.2);
              .courseIcon{
                .icon{
                  background: url("../assets/student/ls.png") no-repeat center;
                  width: 21px;
                  height: 21px;
                }
              }
            }
            &.kx{
              background-color: #e3e7ff;
              .courseIcon{
                .icon{
                  background: url("../assets/student/kx.png") no-repeat center;
                  width: 21px;
                  height: 21px;
                }
              }
            }
          }
          .triangleMain{
            position: absolute;
            width: 32px;
            height: 32px;
            top: 0;
            left: 0;
            border-top-right-radius: 4px;
            overflow: hidden;
            .triangleTop{
              position: absolute;
              top:0;
              right: 0;
              width: 0;
              height: 0;
              border-right: 32px solid transparent;
            }
            &.cp{
              .triangleTop{
                border-top: 32px solid #fea947;
              }
            }
            &.ts{
              .triangleTop{
                border-top: 32px solid #ff6592;
              }
            }
          }

          .testSign{
            position: absolute;
            top:2px;
            left:3px;
            color:#fff;
            font-size: 12px;
          }

        }
      }
    }
  }
}
